<template>
    <div class="container">
        <header>
            <Header></Header>
        </header>
        <div class="group">
            <div>
                <img src="./images/title_subject.png" alt="">
            </div>
            <div class="content">
                <img src="./images/content_subject1.png" alt="">
                <img src="./images/content_subject2.png" alt="">
                <div>获取更多课程</div>
            </div>
            <img @click="down" src="./images/footer_subject.png" alt="">
        </div>
        <div class="group">
            <div>
                <img src="./images/yunzuo-14.png" alt="">
            </div>
            <div class="content">
                <img src="./images/yunzuo-15.png" alt="">
                <img src="./images/yunzuo-16.png" alt="">
                <div>获取更多课程</div>
            </div>
            <img @click="down" src="./images/footer_subject.png" alt="">
        </div>
        <div class="group">
            <div>
                <img src="./images/yunzuo-17.png" alt="">
            </div>
            <div class="content">
                <img src="./images/yunzuo-18.png" alt="">
                <img src="./images/yunzuo-19.png" alt="">
                <div>获取更多课程</div>
            </div>
            <img @click="down" src="./images/footer_subject.png" alt="">
        </div>
        <div class="group">
            <div>
                <img src="./images/yunzuo-20.png" alt="">
            </div>
            <div class="content">
                <img src="./images/yunzuo-21.png" alt="">
                <img src="./images/yunzuo-22.png" alt="">
                <div>获取更多课程</div>
            </div>
            <img @click="down" src="./images/footer_subject.png" alt="">
        </div>
        <div class="group">
            <div>
                <img src="./images/yunzuo-23.png" alt="">
            </div>
            <div class="content">
                <img src="./images/yunzuo-24.png" alt="">
                <img src="./images/yunzuo-25.png" alt="">
                <div>获取更多课程</div>
            </div>
            <img @click="down" src="./images/footer_subject.png" alt="">
        </div>
        <div class="group">
            <div>
                <img src="./images/yunzuo-26.png" alt="">
            </div>
            <div class="content">
                <img src="./images/yunzuo-27.png" alt="">
                <img src="./images/yunzuo-28.png" alt="">
                <div>获取更多课程</div>
            </div>
            <img @click="down" src="./images/footer_subject.png" alt="">
        </div>
        <div class="group">
            <div>
                <img src="./images/yunzuo-29.png" alt="">
            </div>
            <div class="content">
                <img src="./images/yunzuo-30.png" alt="">
                <img src="./images/yunzuo-31.png" alt="">
                <div>获取更多课程</div>
            </div>
            <img @click="down" src="./images/footer_subject.png" alt="">
        </div>
        <div class="group">
            <div>
                <img src="./images/yunzuo-32.png" alt="">
            </div>
            <div class="content">
                <img src="./images/yunzuo-33.png" alt="">
                <img src="./images/yunzuo-34.png" alt="">
                <div>获取更多课程</div>
            </div>
            <img @click="down" src="./images/footer_subject.png" alt="">
        </div>
        <div class="group">
            <div>
                <img src="./images/yunzuo-35.png" alt="">
            </div>
            <div class="content">
                <img src="./images/yunzuo-36.png" alt="">
                <img src="./images/yunzuo-37.png" alt="">
                <div>获取更多课程</div>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>

<script>
import Header from '../../components/Header'
import Footer from '../../components/Footer'
export default {
    name: 'show',
    data() {
        return {
            scrollPosition: 0
        }
    },
    components: {
        Header, Footer
    },
    methods: {
        down(event) {
            this.scrollPosition = document.documentElement.scrollTop + 700;
            // 将滚动条位置设置为新的值
            window.scrollTo({
                top: this.scrollPosition,
                behavior: 'smooth'  // 可选：平滑滚动到新位置
            });
        }
    },
}
</script>

<style scoped>
.container {
    width: 100%;
    min-height: 100vh;
}

header {
    width: 100%;
    height: 100vh;
    background-size: 100% 100%;
    background-image: url('./images/background.png');
}

.group {
    width: 90%;
    height: 700px;
    margin: 50px auto;
    text-align: center;
}

.group>div:first-child {
    text-align: start;
}

.group>img:last-child {
    cursor: pointer;
    animation: opacity-cycle 3s infinite;
}

@keyframes opacity-cycle {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }

    100% {
        opacity: 1;
    }
}

.content {
    width: 90%;
    display: flex;
    padding: 2vw;
    margin: 0 auto;
}

.content img {
    width: 50%;
}

.content img:first-child {
    margin-right: 2%;
}

.content>div {
    padding: 10px;
    font-size: 20px;
    background-color: #999;
    color: white;
    /* 从上到下，从右到左排列 */
    writing-mode: vertical-rl;
    /* 保持正立显示 */
    text-orientation: upright;
}
</style>